<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>DIV + CSS设置一行内文字超过宽度不换行且不显示</title>
	<style type="text/css">
		<!--
		.text-overflow{
			border:1px solid red;
			display:block;           /*内联对象需加*/
			/*width:10em;*/
			width:200px;
			word-break:keep-all;     /* 不换行 */
			white-space:nowrap;      /* 不换行 */
			overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
			text-overflow:ellipsis;  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		}
		
		table{
			/*width:10em;*/
			width:400px;
			table-layout:fixed;      /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
		}
		table td{
			border:1px solid blue;
			width:50%;
			word-break:keep-all;     /* 不换行 */
			white-space:nowrap;      /* 不换行 */
			overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
			text-overflow:ellipsis;  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		} 
		.table-overflow {
			/*width:10em;*/
			width:600px;
			table-layout:fixed;      /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
		}
		.table-overflow td{
			border:1px solid blue;
			width:50%;
			word-break:keep-all;     /* 不换行 */
			white-space:nowrap;      /* 不换行 */
			overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
			text-overflow:ellipsis;  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		} 
		-->
	</style>
</head>
<body>
	<div class="text-overflow" title="DIV + CSS设置一行内文字超过宽度不换行且不显示">DIV + CSS设置一行内文字超过宽度不换行且不显示</div>
	<br/>
	<br/>
	<table>
		<tr>
			<td title="DIV + CSS设置一行内文字超过宽度不换行且不显示">
				DIV + CSS设置一行内文字超过宽度不换行且不显示
			</td>
			<td title="DIV + CSS设置一行内文字超过宽度不换行且不显示">
				DIV + CSS设置一行内文字超过宽度不换行且不显示
			</td>
		</tr>
	</table>
	<br/>
	<br/>
	<table class="table-overflow">
		<tr>
			<td title="DIV + CSS设置一行内文字超过宽度不换行且不显示">
				DIV + CSS设置一行内文字超过宽度不换行且不显示
			</td>
			<td title="DIV + CSS设置一行内文字超过宽度不换行且不显示">
				DIV + CSS设置一行内文字超过宽度不换行且不显示
			</td>
		</tr>
	</table>
</body>
</html>